<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 如果我们的页面要在移动端展示，那一定要在元标签中设置移动端的视口  metavp -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>媒体查询的基本语法</title>
		<style>
			li{
				list-style: none;
				border: 1px red solid;
			}
			
			
			/* 当屏幕宽度小于600px时，隐藏菜单，显示按钮 */
			   /* 媒体查询  screen=电脑屏幕（包括平板、手机） */
			@media all and (max-width:600px)  {
				/* 
				 width:600px  --  等于600px
				 min-width:600px -- 宽度范围：600--无穷大   -- >=600
				 max-width:600px -- 宽度范围：0--600       --  <=600 
				 */
				
				
				/* css代码 */
				
				/* 按钮显示 */
				.btn{
					display: block;
				}
				
				/* 隐藏菜单 */
				.sub-nav{
					display: none;
				}
				
				/* 鼠标悬停时显示菜单 */
				.nav:hover .sub-nav{
					display: block;
					background-color: aqua;
				}
			}
			
			
			/* 默认样式 */
			/* 按钮隐藏 */
			.btn{
				display: none;
			}
			
		</style>
	</head>
	<body>
		
		<div class="nav">
			<div class="btn">
				<button>三</button>
			</div>
			<ul class="sub-nav">
				<li>001</li>
				<li>002</li>
				<li>003</li>
				<li>004</li>
				<li>005</li>
			</ul>
			
		</div>
		
	</body>
</html>